import React, { Component } from 'react';
import Link from 'umi/link';
import withRouter from 'umi/withRouter';
import screenfull from 'screenfull';
import { Affix, Icon, Menu } from 'antd';
import { connect } from 'dva';
import styles from '@/components/BasicHeader/index.less';

import memoryUtils from '@/utils/memoryUtils';

const { SubMenu } = Menu;
const active = {backgroundColor: '#E60A11', color: 'white'};

class SubsystemHeader extends Component {

  constructor(props) {
    super(props);
    const { location } = this.props;
    const url = location.pathname.split("/");
    this.$subSystemHandle = url[2];
    this.state = {
      isFullscreen: true
    }
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'subSystem/fetch', payload: {subSystemOrd: 'station:|h:' + this.$subSystemHandle}});
  }

  // getNavMenus = (subModules, selectedModuleIndex) => {
  //   // const active = {background: 'url("'+require('@/assets/images/a-dashboard-header-menu2.png')+'") no-repeat center center', backgroundSize:'100%'};
  //   const active = {backgroundColor: '#E60A11', color: 'white'};
  //   const list = subModules.map((subModule, index)=>{
  //     // if(index===selectedModuleIndex) {
  //     //   return (
  //     //     <li className={styles.navMenu} style={active} key={index} onClick={()=>this.handleClickMenu(subModule.$handle, index)}>
  //     //       {subModule.title}
  //     //     </li>
  //     //   )
  //     // } else {
  //     //   return (
  //     //     <li className={styles.navMenu} key={index} onClick={()=>this.handleClickMenu(subModule.$handle, index)}>
  //     //       {subModule.title}
  //     //     </li>
  //     //   )
  //     // }
  //     if(subModule.children && subModule.children.length > 0) {
  //       const menu = (
  //         <Menu>
  //           {
  //             subModule.children.map((childSubModule)=>(
  //               <Menu.Item style={(index===selectedModuleIndex)?active:{}}>
  //                   <span onClick={()=>this.handleClickMenu(childSubModule.$handle, index)}>{childSubModule.title}</span>
  //               </Menu.Item>
  //             ))
  //           }
  //         </Menu>
  //       );
  //       return (
  //         <Dropdown overlay={menu} placement="bottomCenter" className={styles.navMenu}>
  //           <Button>{subModule.title}</Button>
  //         </Dropdown>
  //       );
  //     } else {
  //       return (
  //         <button className={styles.navMenu} style={(index===selectedModuleIndex)?active:{}} key={index} onClick={()=>this.handleClickMenu(subModule.$handle, index)}>
  //           {subModule.title}
  //         </button>
  //       )
  //     }
  //   });
  //   list.push(<button className={`${styles.navMenu} ''`} key={subModules.length} onClick={()=>router.replace('/')}>返回首页</button>)
  //   return list;
  // }

  // componentDidMount() {
  //   const { dispatch } = this.props;
  //   dispatch({ type: 'subSystem/fetch', payload: {subSystemOrd: 'station:|h:'+this.$handle}});
  // }

  setFullScreen() {
    if (!screenfull.isEnabled) {
      return false
    }
    screenfull.toggle()
    this.setState({ isFullscreen: screenfull.isFullscreen })
  }

  // render() {
  //   const { title, subModules, loading, selectedModuleIndex } = this.props;
  //   // console.log("render", subModules);
  //   const { isFullscreen } = this.state;
  //   return (
  //     <Affix offsetTop={0}>
  //       <div className={styles.dashboardHeader}>
  //         <div className={styles.header}>
  //           <div className={styles.logo}><img src={require('@/assets/images/logo.png')}/>
  //             <div className={styles.tomo}>
  //               <h1>ENGINEERING</h1>
  //               <h2>TOMORROW</h2>
  //             </div>
  //           </div>
  //           <div className={styles.title} style={{color: memoryUtils.titleColor}}><span onClick={()=>router.replace('/')}>{title}</span></div>
  //           <div className={styles.logout}>
  //             <div>
  //               {memoryUtils.user.username},
  //               <span onClick={()=>{window.open('/logout', '_self');}}> 退出</span>
  //             </div>
  //           </div>
  //           <div className={styles.fullScreen} onClick={()=>this.setFullScreen()}>{isFullscreen?<Icon type='fullscreen'/>:<Icon type='fullscreen-exit'/>}</div>
  //         </div>
  //         {/*<div className={styles.line} style={{backgroundColor: '#ffffff'}}></div>*/}
  //         <div className={styles.navMenus}>
  //           {!loading?this.getNavMenus(subModules, selectedModuleIndex):''}
  //         </div>
  //       </div>
  //     </Affix>
  //   );
  // }

  buildSubNavMenus = (subModules, $handle)=>{
    let navMenus = [];
    if(subModules) {
      navMenus = subModules.map((subModule) => {
        if(subModule.children) {
          return (
            <Menu.ItemGroup title={ <span className='title' title={subModule.title}>{subModule.title}</span> }>
              {this.buildSubNavMenus(subModule.children, $handle)}
            </Menu.ItemGroup>
          );
        } else {
          const path = '/subSystemm/' + this.$subSystemHandle + '/' + subModule.$handle;
          if(subModule.$handle === $handle) {
            this.selected = true;
          }
          return  <Menu.Item key={subModule.$handle}>
            <Link to={path} className='title' title={subModule.title}>{ subModule.title }</Link>
          </Menu.Item>;
        }
      });
    }
    return navMenus;
  }

  buildNavMenus = (subModules, $handle)=>{
    let navMenus = [];
    if(subModules) {
      navMenus = subModules.map((subModule) => {
        this.selected = false;
        if(subModule.children) {
          const subNavMenus = this.buildSubNavMenus(subModule.children, $handle);
          return (
            <SubMenu title={<span className='title' title={subModule.title}>{subModule.title}</span>} className={styles.navMenu} style={this.selected?active:{}}>
              {subNavMenus}
            </SubMenu>
          );
        } else {
          const path = '/subSystemm/' + this.$subSystemHandle + '/' + subModule.$handle;
          return (
            <Menu.Item key={subModule.$handle} className={styles.navMenu} style={$handle===subModule.$handle?active:{}}>
              <Link to={path} className='title' title={subModule.title}>{ subModule.title }</Link>
            </Menu.Item>
          );
        }
      });
    }
    navMenus.push(
      <Menu.Item key={'index'} className={styles.navMenu}>
        {/*<Link to={'/'}>返回首页</Link>*/}
        <span onClick={()=>window.toIndex()}>返回首页</span>
      </Menu.Item>
    );
    return <Menu selectedKeys={[$handle]} mode="horizontal" theme="dark" style={{background: 'transparent', lineHeight: 'unset'}}>{ navMenus }</Menu>;
  }

  render() {
    const { title, subModules, loading, location } = this.props;
    const { isFullscreen } = this.state;
    const url = location.pathname.split("/");
    const $handle = url[3];
    return (
      <Affix offsetTop={0}>
        <div className={styles.dashboardHeader}>
          <div className={styles.header}>
            <div className={styles.logo}>
              <img src={require('@/assets/images/logo.png')}/>
              <div className={styles.tomo}>
                <h1>ENGINEERING</h1>
                <h2>TOMORROW</h2>
              </div>
            </div>
            <div className={styles.title} style={{color: memoryUtils.titleColor}}><span>{ title }</span></div>
            <div className={styles.logout}>
              <div>
                {memoryUtils.user.username},
                <span onClick={()=>{window.open('/logout', '_self');}}> 退出</span>
              </div>
            </div>
            <div className={styles.fullScreen} onClick={()=>this.setFullScreen()}>{isFullscreen?<Icon type='fullscreen'/>:<Icon type='fullscreen-exit'/>}</div>
          </div>
          <div className={styles.navMenus}>
            {!loading?this.buildNavMenus(subModules, $handle):''}
          </div>
        </div>
      </Affix>
    );
  }
}


export default connect(({ subSystem, loading }) => ({
  ...subSystem,
  loading: loading.effects['subSystem/fetch'],
}))(withRouter(SubsystemHeader));
